<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/ad_fragments :: head(~{::title})">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类管理</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../../static/css/me.css">
</head>

<body>
<!--导航-->
<nav th:replace="admin/ad_fragments :: menu(2)" class="ui inverted attached segment">

</nav>
<!--二级导航-->
<div class="ui inverted attached pointing menu">
    <div class="ui container">
        <div id="sidebar-btn" class="ui inverted labeled icon button">
            <i class="sidebar icon"></i>点我
        </div>
    </div>
</div>
<!--中间内容-->
<div class="m-container m-padded-tb-big">
    <div class="ui container">
        <table class="ui compact celled teal table">
            <thead>
            <tr>
                <th></th>
                <th>名称</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:object="${user}">
                <td th:text="${user.nickname}"></td>
                <td th:text="${user.avatar}"></td>
                <td>
                    <a href="#" th:href="@{/admin/user/{id}/input(id=${user.id})}"
                       class="ui mini teal basic button">编辑</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<!--/*/</th:block>/*/-->
<!--利用jQuery获取到菜单-->
<script>
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });

    $("#sidebar-btn").click(function () {
        $(".ui.sidebar")
            .sidebar({
                transition: 'scale down' //默认uncover，可以取值push\overlay\slide along\slide out\scale down
            })
            .sidebar("toggle")
    });

    $('.ui.dropdown').dropdown({
        on: 'hover'
    });

    $('#clear-btn').on('click', function () {
        $('.ui.type.dropdown')
            .dropdown('clear');
    });
    $('.message .close')
        .on('click', function () {
            $(this)
                .closest('.message')
                .transition('fade')
            ;
        })
    ;

    function page(obj) {
        $("[name='page']").val($(obj).data("page"));  //拿到自定义的data-page中的值
        loaddata();
    };

</script>
</body>
</html>